<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" :offset="7" style="text-align: center;">金额</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7" style="line-height: 27px;"><span class="change_title">申请变更金额：</span></el-col>
      <el-col :span="16">
        <el-input
          type="number"
          placeholder="请输入内容"
          v-model="changePrice"
        />
      </el-col>
    </el-row>
    <el-row :gutter="20" style="display: flex;justify-content: center;margin-top: 20px;">
      <el-col :span="20" style="text-align: center;">
        <el-button type="primary" @click="onSave">申请</el-button>
        <el-button type="primary" plain @click="onClose">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { savePriceChange } from '@/api/yzPriceChange';

export default {
  name: 'changePrice',
  props: {
    orderInfo: {}
  },
  data() {
    return {
      changePrice: 0
    }
  },
  methods: {
    async onSave() {
      const userInfo = sessionStorage.getItem('userInfo');
      const userId = JSON.parse(userInfo)['id'];
      const params = { orderId: this.orderInfo.id, price: this.changePrice, userIdSt: userId }
      const { data } = await savePriceChange(params);
      if (data.code === 200) {
        this.$message({
          message: data.msg || '保存成功',
          type: 'success',
        });
        this.$emit('onCloseToggle')
      } else {
        this.$message({
          message: data.msg || '保存失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    onClose() {
      this.$emit('onCloseToggle')
    }
  }
}
</script>
<style scoped>
.change_title {
  font-weight: 700;
  font-size: 14px;
}
/deep/.el-dialog__body {
  padding-top: 16px !important;
}
.el-row {
  margin-bottom: 10px;
}
</style>